<template>
  <el-container class="el_container" >
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center">
          <div class="report_header_left"></div>
          <div style="width: 400px;margin-left: 20px">
            <span style="letter-spacing: 4px">最近风险</span>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;align-items: center">
            <el-button style="margin-left: 10px;height: 32px;border-top-left-radius: 4px !important;border-right: 1px solid rgb(102, 177, 255);
                border-bottom-left-radius: 4px !important;border-top-right-radius: 0px !important;border-bottom-right-radius: 0px !important;margin-top: 7px" size="small" type="primary" @click="seeMore">查看更多</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="pd10">
      <div class="details_card">
        <warehouseList :warehouseForm="warehouseForm"></warehouseList>
      </div>
    </div>
  </el-container>
</template>
<script>
import warehouseList from './list'
import {articleList} from '@/api/report'
export default {
  name: 'saleout-list',
  activated() {
    this.payLoads = new Date().getTime();
  },
  data() {
    return {
      warehouseForm: [],
      pageNum: 1,
      pageSize: 8,
      curHeight:''
    };
  },
  components: {
    warehouseList
  },
  created() {
    this.loadOrder()
  },
  mounted() {
    this.comeIn();
    this.beforeMount()
  },
  methods: {
    seeMore(){
      this.$router.push({
        path: "/reportForm/articleReport",
      });
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == true) {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 265//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 224//减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224//减去页面上固定高度height
    },
    loadOrder() {
      let params = new URLSearchParams();
      params.append('pageNum', this.pageNum);
      params.append('pageSize', this.pageSize);
      articleList(params).then(response => {
        response.data.data.forEach(item=>{
          item.unreadNumber = item.people - item.hits
        })
        this.warehouseForm = response.data.data
        this.total = response.data.total
      })
    }
  }
}
</script>

<style scoped>
.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}
.elOption{
  background-color: #909399;
  color:white ;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}
.el-input__inner {
  width: 100% !important;
}
.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

/deep/ .el-header {
  padding: 10px;
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}

.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}

.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
/deep/ .el-container{
 display: flex;
 flex-direction: column !important;
}
.el_container{
  background-color: white;
  display: flex;
  flex-direction: column;
}
</style>

